<template>
  <div class="dialog" v-show="show">
    <transition name="v-mask">
      <div class="dialog-mask" v-if="show"></div>
    </transition>

    <transition name="v-dialog">
      <div class="dialog-container v-dialog" v-show="show">
        <img class="clear-img" v-if="showClear" @click="_onCancel" src="@/assets/images/clear.png">
        <div class="dialog-header" v-if="head">{{head}}</div>
        <div class="dialog-body" v-html="body"></div>
        <div class="dialog-footer" v-if="showButton">
          <a class="cancel" href="javascript:;" v-if="cancel" @click="_onCancel">{{cancel}}</a>
          <a class="dialog-btn" href="javascript:;" @click="_onDialog">{{confirm}}</a>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    props: {
      show: { // 是否显示此Dialog
        type: String,
        default: false
      },

      head: {
        type: String,
        default: ''
      },

      body: { // 提醒文字
        type: String,
        default: ''
      },

      dialog: {
        type: Function,
        default: Function
      },

      confirm: {
        type: String,
        default: '确认'
      },

      cancel: {
        type: String,
        default: '取消'
      },

      showClear: {
        type: Boolean,
        default: false
      },

      showButton: {
        type: Boolean,
        default: true
      }
    },

    methods: {
      _onDialog () {
        this.dialog()
        this.$dialog.hide()
      },

      _onCancel () {
        this.$dialog.hide()
      }
    }
  }
</script>

<style scoped lang="scss">
  .dialog {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    &-mask {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, .5);
    }
    &-container {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto 30px;
      height: max-content;
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;
      .clear-img{
        position: absolute;
        width: 22px;
        height: 22px;
        right: 8px;
        top: 8px;
      }
    }
    &-header {
      color: rgba(3, 3, 3, 1);
      font-size: 17px;
      text-align: center;
      margin-top: 15px;
      font-weight: 600;
    }
    &-body {
      color: #465166;
      font-size: 14px;
      padding: 15px 22px 20px;
      text-align: center;
    }
    &-footer {
      width: 100%;
      display: flex;
      border-top: 1px solid #d8d8d8;
      a {
        flex: 6;
        height: 53px;
        line-height: 53px;
        font-size: 16px;
        color: #467eea;
        font-weight: bold;
        text-align: center;
        &:nth-child(2) {
          border-left: 1px solid #d8d8d8;
        }
      }
    }
  }

  .v-dialog-enter-active {
    animation: dialog-in .5s;
  }
  .v-dialog-leave-active {
    animation: dialog-out .3s;
  }

  @keyframes dialog-in {
    0% {
      transform: scale(1.185);
      opacity: 0;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  @keyframes dialog-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(0.85);
      opacity: 0;
    }
  }
  .v-mask-enter, .v-mask-leave-active {
    opacity: 0;
  }
  .v-mask-leave-active, .v-mask-enter-active {
    transition: opacity 300ms;
  }
</style>
